<template>
    <div class="template-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>Test Report Template Setting</h1>
        </div>
        
        <!-- 子导航 -->
        <div class="sub-nav">
            <ATabs v-model:activeKey="activeTab" class="custom-tabs">
                <ATabPane key="report" tab="Report Template">
                    <!-- 添加模板按钮 -->
                    <div class="add-template-btn-wrapper" @click="handleAddTemplate">
                        <PlusCircleFilled class="icon-plus" />
                        import
                    </div>

                    <!-- 模板表格 -->
                    <ATable :columns="columns" :dataSource="tableData" :pagination="false" :loading="loading"
                        rowKey="id" class="template-table">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.key === 'template'">
                                <ASpace>
                                    <AButton type="text" class="file-icon word">
                                        <FileWordOutlined />
                                    </AButton>
                                    <AButton type="text" class="file-icon excel">
                                        <FileExcelOutlined />
                                    </AButton>
                                </ASpace>
                            </template>
                            <template v-else-if="column.key === 'operation'">
                                <ASpace>
                                    <AButton class="download-btn" type="link" @click="handleDownload(record)">
                                        Download
                                    </AButton>
                                    <AButton class="download-btn" type="link" @click="handleReplace(record)">
                                        Replace >
                                    </AButton>
                                </ASpace>
                            </template>
                        </template>
                    </ATable>
                </ATabPane>
            </ATabs>
        </div>

        <!-- 上传报告模板弹窗 -->
        <AModal v-model:open="modalVisible" title="Upload Report Template" @ok="handleModalOk"
            @cancel="handleModalCancel" width="600px" :footer="null">
            <div class="upload-modal-content">
                <!-- 提示文字 -->
                <div class="upload-tip">
                    Please upload or update the report template
                </div>

                <!-- 上传区域 -->
                <div class="upload-area" @click="handleUploadClick" @drop="handleDrop" @dragover.prevent>
                    <div class="upload-icon">
                        <CloudUploadOutlined />
                    </div>
                    <div class="upload-text">
                        . EXCEL . DOC
                    </div>
                    <input ref="fileInput" type="file" accept=".xlsx,.xls,.doc,.docx" style="display: none"
                        @change="handleFileChange" />
                </div>

                <!-- 已选择的文件 -->
                <div v-if="selectedFile" class="selected-file">
                    <FileTextOutlined />
                    <span>{{ selectedFile.name }}</span>
                    <AButton type="text" @click="removeFile" class="remove-btn">
                        <CloseOutlined />
                    </AButton>
                </div>

                <!-- 操作按钮 -->
                <div class="modal-footer">
                    <ASpace>
                        <AButton @click="handleModalCancel" class="cancel-btn">
                            Cancel
                        </AButton>
                        <AButton type="primary" @click="handleModalOk" class="save-btn">
                            Save
                        </AButton>
                    </ASpace>
                </div>
            </div>
        </AModal>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {
    PlusCircleFilled,
    FileWordOutlined,
    FileExcelOutlined,
    CloudUploadOutlined,
    FileTextOutlined,
    CloseOutlined
} from '@ant-design/icons-vue';
import './index.scss';

// 定义组件属性
defineOptions({
    name: 'ReportTemplateComponent'
});

// 响应式数据
const activeTab = ref('report');
const loading = ref(false);
const modalVisible = ref(false);
const fileInput = ref();
const selectedFile = ref(null);

// 表格列配置
const columns = [
    {
        title: 'Template name',
        dataIndex: 'name',
        key: 'name',
        sorter: true,
        width: 200
    },
    {
        title: 'uploaded',
        dataIndex: 'uploadTime',
        key: 'uploadTime',
        width: 180
    },
    {
        title: 'Template',
        key: 'template',
        width: 120
    },
    {
        title: 'Operation',
        key: 'operation',
        width: 150
    }
];

// 表格数据
const tableData = ref([
    {
        id: 1,
        name: 'Characteristic Test',
        uploadTime: '2025-08-10 12:00',
        hasWord: true,
        hasExcel: true
    },
    {
        id: 2,
        name: 'Characteristic Test',
        uploadTime: '2025-08-10 12:00',
        hasWord: true,
        hasExcel: true
    },
    {
        id: 3,
        name: 'Characteristic Test',
        uploadTime: '2025-08-10 12:00',
        hasWord: true,
        hasExcel: true
    }
]);

// 方法
const handleAddTemplate = () => {
    modalVisible.value = true;
    selectedFile.value = null;
};

const handleRefresh = () => {
    loading.value = true;
    // 模拟加载
    setTimeout(() => {
        loading.value = false;
    }, 1000);
};

const handleDownload = (record) => {
    console.log('下载模板:', record);
    // 实现下载逻辑
};

const handleReplace = (record) => {
    modalVisible.value = true;
    selectedFile.value = null;
};

// 文件上传相关方法
const handleUploadClick = () => {
    fileInput.value?.click();
};

const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
        selectedFile.value = file;
    }
};

const handleDrop = (event) => {
    event.preventDefault();
    const files = event.dataTransfer.files;
    if (files.length > 0) {
        selectedFile.value = files[0];
    }
};

const removeFile = () => {
    selectedFile.value = null;
    if (fileInput.value) {
        fileInput.value.value = '';
    }
};

const handleModalOk = () => {
    if (selectedFile.value) {
        console.log('上传文件:', selectedFile.value);
        // 这里可以调用API上传文件
        modalVisible.value = false;
        // 刷新表格数据
        handleRefresh();
    }
};

const handleModalCancel = () => {
    modalVisible.value = false;
    selectedFile.value = null;
    if (fileInput.value) {
        fileInput.value.value = '';
    }
};

// 生命周期
onMounted(() => {
    // 初始化数据
});
</script>
